<?xml version="1.0" encoding="UTF-8"?>
<ui:decorate  template="/xhtml/plantillas/baseSeguridad.xhtml"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">    

    <ui:define name="titulo">Consulta-Clientes</ui:define>

    <ui:define name="java_script">
        <script type="text/javascript"> 
            function enmascarar(){
                $(document).ready(function(){
                    $('#form_conci\\:id_fecha_nac').mask('99/99/9999');                    
                });
            }
        </script>
    </ui:define>   

    <ui:define name="contenido">
        <h:outputText value="#{label['consulta.cliente']}" class="encabezado"/>            
        <hr id="horizontalLine" style="width: 780px; margin-left: 20px"/> 
        <h:panelGrid columns="10" class="panelFormulario" >
            <p:accordionPanel activeIndex="0" style="margin-top: 20px; width: 780px" >  
                <p:tab title="#{label['consulta.cliente']}">         

                    <p:fieldset id="fiel" legend="Datos Consulta">
                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['plan.pago']}" />               
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="id_plan"
                                                     effect="fade"
                                                     style="width: 200px;"
                                                     value="#{beanConsultaClientes.id_plan}"                                                  
                                                     >
                                        <p:ajax update=":form_conci" listener="#{beanConsultaClientes.cargarUsuarios()}"/>
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaClientes.lista_planes}"
                                                       var="especialidad"
                                                       itemLabel="#{especialidad.nombre}"
                                                       itemValue="#{especialidad.id_plan_pago}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" />               
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="id_estado"
                                                     effect="fade"
                                                     style="width: 200px;"
                                                     value="#{beanConsultaClientes.id_estado}"                                                  
                                                     >
                                        <p:ajax update=":form_conci" listener="#{beanConsultaClientes.cargarUsuarios()}"/>
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanConsultaClientes.listado_estados}"
                                                       var="especialidad"
                                                       itemLabel="#{especialidad.nombre}"
                                                       itemValue="#{especialidad.id_estado}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>                            
                        </p:panelGrid>
                    </p:fieldset>
                    <p:column><p:commandButton value="#{label['limpiar']}" icon="ui-icon-arrow-4-diag" action="#{beanConsultaClientes.limpiar()}"
                                               update=":form_conci" style="margin-left: 620px"/></p:column>                                        
                    <f:facet name="footer">             
                        <p:commandButton id="id_guardar" value="#{label['guardar']}"                                
                                         action="/xhtml/index" process="@this"/>                
                        <p:commandButton value="#{label['cancelar']}" action="/xhtml/index" process="@this" />    
                    </f:facet>            
                </p:tab>  
            </p:accordionPanel>  
        </h:panelGrid>
        <h:panelGrid columns="10" class="panelFormulario" >
            <p:fieldset legend="Lista de Clientes">
                <p:dataTable id="dataTable" var="usuario" style="width: 750px" 
                             rows="5" value="#{beanConsultaClientes.lista_clientes}"                           
                             rowsPerPageTemplate="5,10,15" selectionMode="single" 
                             selection="#{beanConsultaClientes.persona_tabla}"
                             rowKey="#{usuario.identificacion}"
                             paginator="true"
                             filterEvent="enter"
                             paginatorPosition="bottom">  

                    <p:ajax  event="rowSelect"  update=":form_conci" 
                             listener="#{beanConsultaClientes.seleccionarCliente()}"/>

                    <p:column headerText="Nombre" filterBy="" filterMatchMode="contains">                      
                        <h:outputText value="#{usuario.nombre}" />  
                    </p:column>  

                    <p:column headerText="Primer Apellido" filterBy="" filterMatchMode="contains">                      
                        <h:outputText value="#{usuario.apellido1}" />  
                    </p:column>  

                    <p:column headerText="Segundo Apellido" filterBy="" filterMatchMode="contains">                      
                        <h:outputText value="#{usuario.apellido2}" />  
                    </p:column>  

                    <p:column headerText="Identificación" filterBy="" filterMatchMode="contains">                      
                        <h:outputText value="#{usuario.identificacion}" />  
                    </p:column>  
                </p:dataTable>  
            </p:fieldset>                 
            

            <p:dialog id="modalDialog" header="Cambiar Estado" widgetVar="dlg2" 
                      showEffect="clip" hideEffect="explode" modal="true" height="135">  
                <p:panelGrid>
                    <p:row>
                        <p:column>
                            <h:outputText  styleClass="etiqueta" value="#{label['estado']}"/>                                                                                                                        
                        </p:column>                    
                        <p:column>
                            <p:selectOneMenu id="id_estado"
                                                     effect="fade"
                                                     style="width: 200px;"
                                                     value="#{beanConsultaClientes.id_estado}"                                                  
                                                     >
                                        <f:selectItems value="#{beanConsultaClientes.listado_estados}"
                                                       var="estado"
                                                       itemLabel="#{estado.nombre}"
                                                       itemValue="#{estado.id_estado}" />                                    
                                    </p:selectOneMenu>                            
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column>
                            <p:commandButton value="#{label['guardar']}" style="margin-left: 275px" onclick="dlg2.hide();"/>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:dialog>              
        </h:panelGrid>
    </ui:define>
</ui:decorate>
